<template>
    <div class="dashboard-container">
      <!-- 筛选查询 -->
      <el-form :inline="true">
        <el-form-item label="用户姓名">
          <el-input placeholder="请输入" v-model="params.nickName" clearable></el-input>
        </el-form-item>
        <!-- <el-form-item label="状态">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="是否防骚扰">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-button type="primary" @click="getList">查询</el-button>
        <el-button type="primary" @click="handleAdd('create')">新增一级代理</el-button>
      </el-form>

      <!-- 数据 -->
      <el-table :data="list" v-loading="loading">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="nickName" label="姓名"></el-table-column>
        <el-table-column prop="maxUserCount" label="用户上限"></el-table-column>
        <el-table-column prop="remainNoHarassCount" label="增加席位"></el-table-column>
        <el-table-column prop="loginName" label="账号"></el-table-column>
        <el-table-column prop="phone" label="联系电话"></el-table-column>
        <el-table-column prop="type" label="代理商类型">
          <template slot-scope="{row}">
            {{row.role==1?'一级代理': ''}}
          </template>
        </el-table-column>
        <el-table-column prop="parent.nickName" label="所属"></el-table-column>
        <el-table-column  label="防骚扰">
          <template slot-scope="{row}">
            {{row.noHarassFlag==1?'开启': '未开启'}}
          </template>
        </el-table-column>
        <el-table-column prop="zs" label="拨号号码展示">
          <template slot-scope="{row}">
            {{row.hideNumberFlag==1?'显示': '隐藏'}}
          </template>
        </el-table-column>
        <el-table-column prop="sy" label="状态">
          <template slot-scope="{row}">
            {{ row.enabled==1?"启用": "禁用" }}
          </template>
        </el-table-column>
        <el-table-column  label="操作">
          <template slot-scope="{row}">
            <el-button type="text"  @click="handleAdd('update', row)">编辑</el-button>
            <!-- <el-button type="text">删除</el-button> -->
            <el-button type="text" v-if="row.enabled==1" @click="handleEnable(row.id, 0)" style="color: red">停用</el-button>
            <el-button type="text" v-if="row.enabled==0" @click="handleEnable(row.id, 1)">启用</el-button>
            <!-- <el-button type="text">添加分佣</el-button> -->
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div style="padding-top:30px; text-align: right;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          background
          ::page-sizes="[10, 20, 30, 40]"
          :page-size="params.pageCount"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>


      <!-- 新增、编辑 -->
      <el-dialog :title="dialogType=='create'?'新增一级代理':'编辑一级代理'" :visible.sync="dialogVisible" width="800px">
        <el-form label-width="120px" :model="temp"  :rules="rules" ref="ruleForm">
          <el-form-item label="防骚扰" prop="noHarassFlag">
            <el-radio v-model="temp.noHarassFlag" :label="1">开启</el-radio>
            <el-radio v-model="temp.noHarassFlag" :label="0">关闭</el-radio>
          </el-form-item>
          <el-form-item label="姓名" prop="nickName">
            <el-input v-model="temp.nickName" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="登录账号" prop="loginName">
            <el-input v-model="temp.loginName" placeholder="请输入登录账号"></el-input>
          </el-form-item>
          <el-form-item label="手机" prop="phone">
            <el-input v-model="temp.phone" placeholder="请输入手机"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password ">
            <el-input v-model="temp.password " placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="用户上限" prop="maxUserCount">
            <el-input-number v-model="temp.maxUserCount" ></el-input-number>
          </el-form-item>
          <el-form-item label="拨号号码隐藏" prop="hideNumberFlag">
            <el-radio v-model="temp.hideNumberFlag" :label="1">显示</el-radio>
            <el-radio v-model="temp.hideNumberFlag" :label="0">隐藏</el-radio>
          </el-form-item>
        </el-form>
        <div style="text-align: right;">
          <el-button @click="dialogVisible=false">取消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
        </div>
      </el-dialog>

    </div>
  </template>
  
  <script>
  import { mapGetters } from 'vuex'
  import { userGetlist, userCreate, userEnable, userUpdate, userAdjustQuota } from '@/api/user'
  import moment from 'moment';
  import md5 from 'js-md5'
  
  export default {
    name: 'Dashboard',
    computed: {
      ...mapGetters([
        'name'
      ])
    },
    data(){
      return {
        list: [],
        currentPage4: 1,
        params: {
          pageIndex: 0,
          pageCount: 10,
          role: 1,
          nickName: '',
          phone: ''
        },
        total: 0,
        dialogType: 'create',
        dialogVisible: false,
        temp: {},
        rules: {
          noHarassFlag: [{ required: true, message: '必选', trigger: 'blur' }],
          hideNumberFlag: [{ required: true, message: '必选', trigger: 'blur' }],
          maxUserCount: [{ required: true, message: '用户上线不能为空', trigger: 'blur' }],
          nickName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
          loginName: [{ required: true, message: '请输入登录账号', trigger: 'blur' }],
          phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        },
        loading: false
      }
    },
    mounted(){
      this.getList();
    },
    methods:{
      //提交表单
      submitForm(formName){
        this.$refs[formName].validate(async (valid) => {
            if (valid) {
              let temp;
              temp = Object.assign({}, this.temp)
              if(temp.password){
                temp.password = md5(temp.password)
              }
              if(this.dialogType=='create'){
                await userCreate(temp)
              }else{
                await userUpdate(temp)
              }
              this.dialogVisible = true;
              this.getList();
            } else {
              console.log('error submit!!');
              return false;
            }
          });
      },
      //点击添加
      handleAdd(type, row){
        this.dialogType = type;
        this.dialogVisible = true;
        if(type=='create'){
          this.temp = {
            loginName: '',
            password: '',
            phone: '',
            role: 1,
            noHarassFlag: 1,
            hideNumberFlag: 1,
            maxUserCount: 99999999
          }
        }else{
          row.password = '';
          this.temp = Object.assign({}, row)
        }
      },
      //禁启用
      async handleEnable(id, enabled){
        await userEnable({ dataId: id, enabled });
        this.$message.success({ message: '操作成功' })
        this.getList();
      },
      //获取数据列表
      async getList(){
        this.loading = true;
        let data = await userGetlist(this.params)
        this.loading = false;
        this.list = data.data.list.map(item=>{
          item.createTime = moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')
          return item
        })
        this.total = data.data.totalCount;
      },
      //切换数量
      handleSizeChange(){
        this.params.pageIndex = 0;
        this.params.pageCount = val;
        this.getList();
      },
      //切换页码
      handleCurrentChange(){
        this.params.pageIndex = val-1;
        this.getList();
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
  </style>
  